<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_019_变异方法</title>

</head>
<body>
    <div id="app">
        <div>
            变异方法和数组替换的方法：因为vue对数据都是响应式的，但是数组默认情况下都不是相应的，所以vue就将数组数据变为响应式的，这样我们操作了data里面的数据,
            页面模板也会跟着变化，变异方法操作数组时，数组本身会跟着变化。而替换数组的方法不会使原始数组产生变化，而是产生一个新的数组<br />
            变异方法名称：<input type="text" v-model="methodName" />
            <input type="button" value="unshift" @click="unshiftMethod" />
            <input type="button" value="push" @click="pushMethod" />
            <input type="button" value="pop" @click="popMethod" />
            <input type="button" value="shift" @click="shiftMethod" />
            <input type="button" value="splice" @click="spliceMethod" />
            <input type="button" value="sort" @click="sortMethod" />
            <input type="button" value="reverse" @click="reverseMethod" />
            <br />
            <h2>变异方法</h2>
            <table>
                <tr :key="item.key" v-for="(item,index) in methodArray">
                    <td >{{item.methodName}}</td>
                    <td >{{item.methodNameHelp}}</td>
                </tr>
    
            </table>    
        </div>

        <div>
            替换数组的方法名称：
            <input type="text" v-model="methodName1" />
            <input type="button" value="slice" @click="sliceMethod" /> 
            <br />
            <h2>替换数组的方法：</h2>
            <table>
                <tr :key="item.key" v-for="(item,index) in methodArray1">
                    <td >{{item.methodName}}</td>
                    <td >{{item.methodNameHelp}}</td>
                </tr>
    
            </table>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">

        var vm = new Vue({
            el:'#app',
            data:{
                //变异方法列表：会改变原始的数组
                methodName:"",
                methodArray:[
                    {
                        key:0,
                        methodName:"unshift()",
                        methodNameHelp:"在数组的开头添加一个或者多个元素，返回原数组的长度，改变原来的数组"
                    },
                    {
                        key:1,
                        methodName:"push()",
                        methodNameHelp:"往数组最后面添加一个元素，成功返回当前数组的长度"
                    },
                    {
                        key:2,
                        methodName:"pop()",
                        methodNameHelp:"删除数组的最后一个元素，成功返回删除元素的值"
                    },
                    {
                        key:3,
                        methodName:"shift()",
                        methodNameHelp:"删除数组的第一个元素，返回该元素"
                    },
                    {
                        key:4,
                        methodName:"splice()",
                        methodNameHelp:"有三个参数，第一个是删除index位置的元素（必选），第二个是想要删除的个数（必选），" +
                                        "第三个是删除后想要在原位置替换的值（可选）"
                    },
                    {
                        key:5,
                        methodName:"splice(index，num，5)",
                        methodNameHelp:"表示从index下标位置开始向后截取num个元素，截取的这些元素组成一个新数组返回，"+
                                        "并且从index位置开始，插入后面的所有参数。（插入到原数组里去）"
                    },
                    {
                        key:6,
                        methodName:"sort()",
                        methodNameHelp:"使数组按照字符编码默认从小到大排序,成功返回排序后的数组"
                    },
                    {
                        key:7,
                        methodName:"reverse()",
                        methodNameHelp:"将数组倒序，成功返回倒序后的数组"
                    }
                ],
                methodName1:"",
                //数组替换方法列表：产生一个新的数组，不会对原始数组产生变化
                methodArray1:[
                    {
                        key:0,
                        methodName:"filter",
                        methodNameHelp:"可以对数组元素进行过滤"
                    },
                    {
                        key:1,
                        methodName:"concat",
                        methodNameHelp:"将一个或多个数组组合到原数组中，组成新的数组返回"
                    },
                    {
                        key:2,
                        methodName:"slice()",
                        methodNameHelp:"将原数组copy"
                    },
                    {
                        key:3,
                        methodName:"slice(startindex，endindex)",
                        methodNameHelp:"从startindex下标开始向后截取到endindex位置（不包含）的元素，截取的这些元素组成新的数组返回，原数组不变"
                    }
                ]
            },
            methods:{
                //变异方法：unshift  在数组的开头添加一个或者多个元素，返回原数组的长度，改变原来的数组
                 unshiftMethod:function(){
                    var obj = {
                        key:this.methodArray.length,
                        methodName:this.methodName,
                        methodNameHelp:"----------"
                    }
                    this.methodArray.unshift(obj);
                },
                //变异方法：push  往数组最后面添加一个元素，成功返回当前数组的长度
                pushMethod:function(){
                    var obj = {
                        key:this.methodArray.length,
                        methodName:this.methodName,
                        methodNameHelp:"----------"
                    }
                    this.methodArray.push(obj);
                },
                //变异方法：pop  删除数组的最后一个元素，成功返回删除元素的值
                popMethod:function(){
                    this.methodArray.pop();
                },
                //变异方法：shift  删除数组的第一个元素，返回该元素
                shiftMethod:function(){
                    this.methodArray.shift();
                },
                //变异方法：splice  有三个参数，第一个是删除index位置的元素（必选），第二个是想要删除的个数（必选），
                //第三个是删除后想要在原位置替换的值（可选）
                spliceMethod:function(){
                    this.methodArray.splice(1,2);
                },
                //变异方法：sort  使数组按照字符编码默认从小到大排序,成功返回排序后的数组
                sortMethod:function(){
                    this.methodArray.sort();
                },
                //变异方法：reverse  将数组倒序，成功返回倒序后的数组
                reverseMethod:function(){
                    this.methodArray.reverse();
                },
                //数组替换方法：slice  将数组倒序，成功返回倒序后的数组
                sliceMethod:function(){
                    this.methodArray1 = this.methodArray1.slice(1,3);
                }
            }
            
        });

    </script>
</body>

</html></SCRIPT>